import React from 'react';
import "./left-nav.less";
import { Link, withRouter, useLocation } from 'react-router-dom';
import logo from "../../assets/images/logo.jpg";
import { Menu } from 'antd';
import menuList from "../../config/menuConfig.js";
import {
    // HomeOutlined,
    // AccountBookOutlined,
    // BarChartOutlined,
    // AppstoreOutlined,
    // BarsOutlined,
    // UserOutlined,
    // UserSwitchOutlined,
    // LineChartOutlined,
    AreaChartOutlined,
    PieChartOutlined,
} from '@ant-design/icons';
const { SubMenu } = Menu;

const LeftNav = () => {
    const path = useLocation().pathname;
    let openKey;
    const getMenuNodes = (menuList) => {
        return menuList.map(item => {
            if(!item.children) {
                return (
                    <Menu.Item key={item.key} icon={<PieChartOutlined />}>
                        <Link to={item.key}>{item.title}</Link>
                    </Menu.Item>
                )
            }
            else {
                const cItem = item.children.find(cItem => cItem.key === path);
                if(cItem) {
                    openKey = item.key;
                    console.log(openKey);
                }
                return (
                    <SubMenu key={item.key} icon={<AreaChartOutlined />} title={item.title}>
                        {getMenuNodes(item.children)}
                    </SubMenu>
                )
            }
        })
    };
    return (
        <div className="left-nav">
            <Link to="/" className="left-nav-header">
                <img src={logo} alt={logo}></img>
                <h1>后台管理平台</h1>
            </Link>
            <Menu
                mode="inline"
                theme="dark"
                selectedKeys={[path]}
                defaultOpenKeys={[openKey]}
                >
                { getMenuNodes(menuList) }
                {/* <Menu.Item key="/home" icon={<PieChartOutlined />}>
                    <Link to="/home">首页</Link>
                </Menu.Item>
                <SubMenu key="sub1" icon={<MailOutlined />} title="商品">
                    <Menu.Item key="/category" icon={<MailOutlined />}><Link to="/category">品类管理</Link></Menu.Item>
                    <Menu.Item key="/product" icon={<MailOutlined />}><Link to="/product">商品管理</Link></Menu.Item>
                </SubMenu>
                <Menu.Item key="/user" icon={<PieChartOutlined />}>
                    <Link to="/user">用户管理</Link>
                </Menu.Item>
                <Menu.Item key="/role" icon={<PieChartOutlined />}>
                    <Link to="/role">角色管理</Link>
                </Menu.Item> */}
            </Menu>
        </div>
    )
}
const Nav = withRouter(LeftNav); /*非路由组件变为路由组件 拥有history location 和 match*/
export {Nav};